<template>
    <div>
        <div class="box" ref="element" @click="handler">我爱你塞北的大雪</div>
    </div>
</template>
<script setup lang="ts">
//ref属性有两种写法:字符串、函数写法
//组件挂载完毕,获取div的DOM元素,背景颜色天蓝色
import { onMounted, ref } from 'vue';
//务必同名的ref对象
const element = ref();
const fs = ref(16);
//组件挂载完毕
onMounted(() => {
    element.value.style.background = 'skyblue'
});
//元素的事件回调
const handler = () => {
   fs.value++;
   element.value.style.fontSize = fs.value+'px';
}
</script>

<style scoped>
.box {
    width: 600px;
    height: 400px;
    margin: 0 auto;
    background: red;
}
</style>